<template>
	<view>
		
		<view class="xm-padding-30r xm-border-box" style="width: 100%;height: auto;">
			<view class="xm-padding-30r xm-border-box"
				style="width: 100%;height: auto;background-color: #FFFFFF;border-radius: 20rpx;margin-bottom: 0rpx;">

				<view class="xm-flex-r xm-justify-between">
					<view class="xm-flex-r">
						<image :src="Item.top_icon" @click="open(1)"
							style="width: 131rpx;height: 131rpx;border-radius: 50%;margin-right: 20rpx;"
							mode="aspectFill"></image>
						<view class="xm-fontsize-30 xm-flex-cr">
							{{Item.user_name}}
						</view>
					</view>
					<view class="" style="font-size: 20rpx;">
						<!-- 2021 3:20 -->
						{{Item==undefined?' 时间':Item.date}}
					</view>
				</view>

				<view class="xm-flex-r xm-justify-between" style="align-items: center;margin-top: 30rpx;">
					<view v-if="Item.title!=null" class="" style="width: 350rpx;color: #3f3f3f;">
						<!-- 标题党 -->
						{{Item==undefined?'标题: ':Item.title}}
					</view>



				</view>



				<view class="xm-fontsize-30" v-if="Item.body!=null"
					style="width: 100%;height: auto;margin-top: 30rpx;margin-bottom: 30rpx;box-sizing: border-box;overflow: hidden;white-space: pre-wrap;">
					<!-- 内容一大推的内容，内容一大推的内容内容一大推的内容内容一大推的内容内容一大推的内容内容一大推的内容，内容一大推的内容。。。。。。。 -->
					<view class="">
						主体：
						<text selectable="true" style="color: #3F536E;">{{Item==undefined?'':Item.body}}</text>
					</view>
				</view>

				<view class="xm-fontsize-30" v-if="Item.hint!=null"
					style="width: 100%;height: auto;margin-top: 30rpx;margin-bottom: 30rpx;box-sizing: border-box;overflow: hidden;white-space: pre-wrap;">
					<!-- 内容一大推的内容，内容一大推的内容内容一大推的内容内容一大推的内容内容一大推的内容内容一大推的内容，内容一大推的内容。。。。。。。 -->
					<view class="">
						简介：
						<text style="text-align: right;color: #3F536E;">{{Item==undefined?'':Item.hint}}</text>
					</view>
				</view>
				<!-- v-if="Item.imgs!=undefined" -->
				<view v-if="imgs.length>0" v-for="(img,index) in imgs" class=""
					style="width: 100%;height: auto;margin-bottom: 30rpx;">
					<image :src="img" style="width: 100%;" mode="widthFix"></image>
				</view>

				<view class="xm-flex-r xm-justify-between xm-border-box" style="align-items: center;">
					<view class="">
						评论 ( <text class="xm-fontsize-25"
							style="color: #686868;margin-left: 10rpx;margin-right: 10rpx;">{{ plList.length }}</text> )
					</view>
					<view class="xm-flex-rr">

						<view class="xm-flex-r" style="margin-left: 10rpx;align-items: center;">
							<text class="xm-fontsize-25"
								style="margin-left: 10rpx; color: #6a757a;margin-right: 15rpx;">{{good == undefined?'0':good}}</text>
							<image src="../../static/images/icon/xinxin.png" mode="widthFix" style="width: 60rpx;">
							</image>
						</view>


					</view>


				</view>
				<view class="" @click="open(2)" v-if="plList.length<1"
					style="height: 550rpx;margin-top: 60rpx;color: #2C405A;">
					还没有人评论，来抢占沙发吧！
				</view>
				<!-- 评论区 -->
				<view v-if="plList.length>0" class="xm-border-box xm-padding-30r xm-flex-c"
					style="width: 100%;height: auto;border: 4rpx #aab0ce solid;margin-top: 30rpx;border-radius: 20rpx;">

					<view class="" v-for="(item,value) in plList" :key="value" @click="$api.gotoType('to','./commitdetalis/commitdetalis?pl_id='+item.pl_id)">
						<view class="xm-flex-r">
							<image :src="item.top_icon"
								style="margin-right: 20rpx;width: 69rpx;height: 69rpx;border-radius: 50%;background-color: #26ACD4;"
								mode="aspectFill"></image>

							<view class="xm-flex-c" style="flex: 1;">
								<view class="xm-flex-r xm-justify-between" style="align-items: center;">
									<view class="xm-fontsize-30">
										<!-- 昵称 -->
										{{item.user_name}}
									</view>
									<!-- 评论时间 -->
									<view class="xm-fontsize-25" style="color: #a1a1a1;">
										<!-- 2021 023314 -->
										{{item.date}}
									</view>
									<!-- <view class="xm-flex-rr">
										
										<view class="xm-flex-r" style="margin-left: 10rpx;align-items: center;">
											<text class="xm-fontsize-15" style="margin-left: 10rpx; color: #6a757a;margin-right: 15rpx;">200</text>
											<image src="/static/images/icon/select_token.png" mode="widthFix" style="width: 40rpx;"></image>
										</view>
										
										<view class="xm-flex-r" style="margin-left: 10rpx;align-items: center;">
											<text class="xm-fontsize-15" style="margin-left: 10rpx; color: #6a757a;margin-right: 15rpx;">200</text>
											<image src="/static/images/icon/good.png" mode="widthFix" style="width: 40rpx;"></image>
										</view>
										
										
									</view> -->

								</view>

								<view class="xm-fontsize-20 xm-flex-r xm-justify-between" style="margin-top: 30rpx;margin-bottom: 30rpx;">
									<!-- 评论类容评论
									类容评论类容评论类容评论类容评论类容评论类容评论类容评论类容评论类容 -->
									<view class="" style="max-height: 120rpx;width: 90%;overflow: hidden;line-height: 40rpx; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 3;-webkit-box-orient: vertical;">
										{{item.comment}}
									</view>
									
									<view @click.stop="open(3,item.pl_id,value)" class="" style="width: 100rpx;height: 40rpx;line-height: 40rpx;text-align: center;" v-if="user_id == Item.user_id">
										删除
									</view>
								</view>

							</view>

						</view>

						<view class=""
							style="margin-bottom: 30rpx;background-color: #a8aecc;height: 2rpx;width: 85%;margin-left: auto;">

						</view>
					</view>

				</view>
			</view>
		</view>
		
		<view @click="open(2)" class="xm-flex-r"
			style="margin-left: 10rpx;align-items: center;border: 2rpx #8f8f8f solid;border-radius: 20rpx;position: fixed;top: 200rpx;right: 60rpx;">
			<text class="xm-fontsize-25"
				style="margin-left: 10rpx; color: #6a757a;margin-right: 15rpx;">点击评论</text>
			<image src="../../static/images/icon/pinglun.png" mode="widthFix" style="width: 60rpx;">
			</image>
		</view>
		<uni-popup ref="popup" type="center" v-if="typePP==1">
			<view class="" style="width: 100%;height: auto;">
				<image :src="Item.top_icon" mode="widthFix"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom" v-if="typePP==2">
			<view class="xm-flex-r xm-justify-center" 
				style="border-radius: 0rpx  0rpx 0rpx; padding-top: 15rpx;position: fixed;width: 100%;bottom: 0rpx;height: auto;background-color: #FFFFFF;left: 0rpx;">
				<textarea type="text" maxlength="-1" v-model="commentitem.comment" value=""
					placeholder="点击输入评论内容"
					style="border-radius: 20rpx;padding-left: 20rpx;padding-right: 20rpx;overflow-x: hidden;font-size: 30rpx;width: 70%;height: 200rpx;margin-bottom: 30rpx; line-height: 60rpx;border: 4rpx #967fac solid;margin-right: 20rpx;" />
				<view @click="addpl()" class="xm-fontsize-30"
					style="width: 92rpx;height: 60rpx;line-height: 60rpx;border: 4rpx #967fac solid;text-align: center;border-radius: 20rpx;">
					确定
				</view>
			</view>
		</uni-popup>
		
		<view class="">
			<uni-popup ref="popup" type="top" v-if="typePP==3">
				<view class="xm-flex-c xm-padding-30r xm-border-box"
					style="width: 100%;height: 400rpx;background-color: #FFFFFF;border-radius: 0rpx 0rpx 40rpx 40rpx;">
		
					<view class="" style="width: 100%;text-align: center;margin-top: 140rpx;">
						确认删除这一条评论吗 ？
					</view>
		
					<view class="xm-flex-r xm-justify-around" style="width: 100%;height: auto;margin-top: 60rpx;">
		
						<view class="" @click="setDelete()"
							style="width: 120rpx;height: 47rpx;line-height: 47rpx;border: 4rpx #007AFF solid;text-align: center;border-radius: 10rpx;">
							确认
						</view>
						<view @click="close" class=""
							style="width: 120rpx;height: 47rpx;line-height: 47rpx;border: 4rpx #007AFF solid;text-align: center;border-radius: 10rpx;">
							取消
						</view>
		
					</view>
		
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			var date = new Date()
			var time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() +
				":" + date.getMinutes() + ":" + date.getSeconds()
			return {
				Item: undefined,
				plList: [],
				good: undefined,
				typePP:1,
				user_id:undefined,
				commentitem: {
					"user_id": null,
					"fg_id": null,
					"comment": null,
					"date": time
				},
				index:undefined,
				pl_id:undefined,
				imgs: [],
				userlist: undefined
			}
		},
		onShow() {
			this.getItem()
		},
		onLoad(data) {
			var that = this
			console.log(data);
			this.commentitem.fg_id = data.id
			if (data.good > 0) {
				this.good = data.good
			} else {
				this.good = 0
			}
			this.userList()
			uni.getStorage({
				key: "token",
				success: data => {
					console.log(data.data);
					that.user_id = data.data
					this.commentitem.user_id = data.data
				}
			})

		},
		methods: {
			open(data,id,index) {
				this.typePP = data
				this.$refs.popup.open('top')
				if(data==3){
					this.pl_id = id
					this.index = index
				}
			},
			close() {
				this.$refs.popup.close()
			},
			userList() {
				this.$http(this.$url.user.list, "get")
					.then(res => {
						if (res.code == 0) {
							console.log(res);
							this.userlist = res.list
							console.log(this.userlist);
							this.getItem()
						}

					})
			},
			setDelete() {
				
				this.$http(this.$url.comment.delete, "post", {
					pl_id: this.pl_id
				}, {
					'content-type': 'application/json'
				}).then(res => {
					console.log(res);
					this.$refs.popup.close()
					this.$api.msg("删除成功")
					var arr = []
					for (var i = 0; i < this.plList.length; i++) {
						if(i!=this.index){
							arr.push(this.plList[i])
						}
					}
					// this.plList = this.plList.splice(this.index,0)
					this.plList = arr
					
				})
			
			},
			getItem() {
				var that = this
				this.$http(this.$url.fragment.findone, "post", {
					fg_id: this.commentitem.fg_id
				}, {
					'content-type': 'application/json'
				}).then(res => {
					if (res.code == 0) {
						var item = res.data
						console.log(res);
						this.userlist.forEach(data => {

							if (item.user_id == data.user_id) {
								console.log("第三层");
								let bean = {
									body: item.body,
									date: item.date,
									fg_id: item.fg_id,
									good: item.good,
									hint: item.hint,
									label: item.label,
									title: item.title,
									typeopen: item.typeopen,
									user_id: item.user_id,
									user_name: data.user_name,
									top_icon: data.top_icon,
									imgs: item.imgs
								}
								that.Item = bean
								if (bean.imgs != null) {
									that.imgs = item.imgs.split(",")
								}
								console.log(that.Item);
							}

						})

						this.getPlList()
					}

				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
				})

			},
			getPlList() {
				this.$http(this.$url.comment.list, "post", {
					'content-type': 'application/json'
				}).then(res => {
					if (res.code == 0) {
						// console.log(res);
						var arr = []
						res.list.forEach(item => {
							if (item.fg_id == this.commentitem.fg_id) {
								// console.log("第一层");
								this.userlist.forEach(data => {

									if (item.user_id === data.user_id) {
										// console.log("第三层");
										let bean = {
											comment: item.comment,
											date: item.date,
											fg_id: item.fg_id,
											pl_id: item.pl_id,
											user_id: item.user_id,
											top_icon: data.top_icon,
											user_name: data.user_name
										}
										arr.push(bean)
									}
								})
							}
						})
						this.plList = arr

						console.log(this.plList);
					}

				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
					uni.stopPullDownRefresh();
				})
			},
			addpl() {
				if (this.commentitem.comment == null) {
					this.$api.msg("请输入评论内容")
					return false
				}
				if (this.commentitem.user_id == -1) {
					this.$api.msg("你还未登陆，不能评论")
					return false
				}

				this.$http(this.$url.comment.addone, "post", this.commentitem, {
					'content-type': 'application/json'
				}).then(res => {
					if (res.code == 0) {
						console.log(res);
						let item = res.data
						this.userlist.forEach(data => {

							if (res.data.user_id === data.user_id) {
								// console.log("第三层");
								let bean = {
									comment: item.comment,
									date: item.date,
									fg_id: item.fg_id,
									pl_id: item.pl_id,
									user_id: item.user_id,
									top_icon: data.top_icon,
									user_name: data.user_name
								}
								this.plList.push(bean)
							}

						})
						this.close()
						this.commentitem.comment = null
						console.log(this.plList);
					}

				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #E1E1E1;
	}
</style>
